{extend name="admin@public/base_content" /}
<!--头部描述信息开始<div class="container-fluid am-cf">-->
{block name="content_header">}{include file="admin@public/common" /}{/block}
<!--头部描述信息结束-->
<!-- 内容区域开始 <div class="row-content am-cf">-->
{block name="body">}
<div class="row-content am-cf">
    <!--表单内容开始-->
    <form class="m-form tpl-form-border-form tpl-form-border-br" role="form" action="{:url('')}" method="post" id="ajax_form"  >
        <div class="am-tabs am-margin" data-am-tabs="{noSwipe: 1}">
            <ul class="am-tabs-nav am-nav am-nav-tabs">
                <li class="am-active"><a href="#tab1">基本信息</a></li>
                <li><a href="#tab2">扩展信息</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                    <div class="row">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                            <div class="widget am-cf">
                                <div class="widget-head am-cf">
                                    <div class="widget-title am-fl">添加内容</div>
                                    <div class="widget-function am-fr">
                                        <a href="javascript:;" class="am-icon-cog"></a>
                                    </div>
                                </div>
                                <div class="widget-body am-fr">

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 上级栏目 </label>
                                        <div class="am-u-sm-3">
                                            <select class="tpl-form-input" name="parent_id" id="parent_id">
                                                <option value="0">顶级栏目</option>
                                                {foreach name="categoryList" item="vo"}
                                                <option value="{$vo.class_id}">{$vo.cname}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 页面名称 </label>
                                        <div class="am-u-sm-3">
                                            <input type="text" name="name" id="name" required placeholder=" 请输入页面名称" class="tpl-form-input" />
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 形象图 </label>
                                        <!--1、input框-->
                                        <div class="am-u-sm-2">
                                            <input type="text" readonly="readonly" name="image" value="" class="image0 tpl-form-input">
                                        </div>
                                        <!--2、浏览选择图片-->
                                        <div class="am-u-sm-2">
                                            <input type="file"  class="file input-file" number="0" class="file input-file" multiple="multiple" class="tpl-form-input">
                                        </div>
                                        <!--3、预览按钮-->
                                        <div class="am-u-sm-1">
                                            <a type="button" href="javascript:void(0);"  class="image0 am-round am-btn am-btn-primary am-btn-xs" >预览</a>
                                        </div>
                                        <!--上传后的预览小图-->
                                        <div class="am-u-sm-2">
                                            <img src="" class="img0" style="max-width: 30px; max-height: 30px;" />
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 页面内容 </label>
                                        <div class="am-u-sm-3">
                                            <textarea name="content" id="content" cols="100" rows="20"></textarea>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 栏目关键词 </label>
                                        <div class="am-u-sm-3">
                                            <input type="text" name="keywords" id="keywords" placeholder=" 请输入页面名称" class="tpl-form-input" />
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 栏目描述 </label>
                                        <div class="am-u-sm-3">
                                            <textarea name="description" id="description" class="tpl-form-input" placeholder="请输入文章描述" style="height:80px;"></textarea>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 栏目排序 </label>
                                        <div class="am-u-sm-3">
                                            <input type="number" value="0" name="sequence" class="input-mini" id="sequence" />
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 页面模板 </label>
                                        <div class="am-u-sm-6">
                                            <input type="text" name="class_tpl" class="tpl-form-input" id="class_tpl" value="page" style="width:200px"  />
                                            &nbsp;&nbsp;&nbsp;&nbsp;
                                            <select target="#class_tpl" style="width:200px" >
                                                <option value="0">请选择</option>
                                                <option value="0">list.html</option>
                                                <option value="0">listt.html</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label class="am-u-sm-3 am-form-label" > 页面状态 </label>
                                        <div class="am-u-sm-3">
                                            <label class="radio-inline">
                                                <input type="radio" name="show" id="inlineRadio1" checked value="1"> 开启
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" name="show" id="inlineRadio2" value="0"> 关闭
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="am-tab-panel am-fade" id="tab2">

                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label" > 子标题 </label>
                        <div class="am-u-sm-3">
                            <input type="text" name="subname" id="subname" placeholder=" 扩展标题的副标题信息" class="input-mini" />
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label" > 栏目URL </label>
                        <div class="am-u-sm-3">
                            <input type="text" name="urlname" id="urlname" placeholder=" 设置URL规则后会生效" class="input-mini" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="am-margin">



            <button type="button" class="am-btn am-btn-primary am-btn-xs" id="btn">提交保存</button>
            <button type="reset" class="am-btn am-btn-primary am-btn-xs">重置</button>
        </div>
        <!--表单内容结束-->
    </form>



</div>

{/block}
<!-- 内容区域结束 -->
<!-- 脚本文件开始 -->
{block name="script"}
<!--kingeditor编辑器开始-->
<script>
    //document.domain = 'domain.com';
    KindEditor.ready(function(K) {
        window.editor = K.create('#content', {
            allowFileManager : true,
            langType : 'zh-CN',
            autoHeightMode : true,
            afterBlur: function () { this.sync(); },
        });
    });
</script>
<!--kingeditor编辑器结束-->
<!--jq时间控件开始-->
<link rel="stylesheet" type="text/css" href="__PLUG__/jqdate/jquery.datetimepicker.css"/>
<script src="__PLUG__/jqdate/build/jquery.datetimepicker.full.js"></script>
<script>
    $.datetimepicker.setLocale('ch');//设置中文
    $('.jqdate').datetimepicker({});
</script>
<!--jq时间控件结束-->

<script>
    //上传图片
    $(document).on('change',".file",function(){
        var obj=this;
        var action = "{:url('kbcms/admin_upload/upload')}";
        var file=obj.files[0];
        var xhr = new XMLHttpRequest();
        xhr.open("post", action, true); // 上传地址
        xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var str = $.parseJSON(xhr.responseText); // 返回格式，此处为json，可以为别的格式
                    if (str.status==1){
                        var objUrl = getObjectURL(file) ;
                        //console.log("objUrl = "+objUrl) ;
                        var num=$(obj).attr("number");
                        if (objUrl) {
                            $("#img"+num).attr("src", objUrl);
                            $("#image"+num).val(str.url);
                        }
                    }else{
                        alert(str.msg);
                    }
                }
            }
        }
        var fd = new FormData();
        fd.append('file', file);
        xhr.send(fd);
    }) ;
    //建立一個可存取到該file的url
    function getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }
</script>
{/block}
<!-- 脚本文件结束 -->